<!DOCTYPE html>
<html lang="en">
<head>
  <base href="{{ baseHref }}">
  <meta charset="utf-8">
  <title>{% block title %}Index{% endblock %} - Mongo Express</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="stylesheets/bootstrap.css" rel="stylesheet">
  <link href="stylesheets/style.css" rel="stylesheet" />
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .sidebar-nav {
      padding: 9px 0;
    }
    .sidebar-nav a {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .tooltip-inner {
      max-width: 500px;
    }
  </style>

  <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
  <script src="javascripts/jquery-1.7.2.min.js"></script>
  <script src="javascripts/bootstrap.min.js"></script>

  {% block head %}{% endblock %}
</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="">Mongo Express</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><a href="">Home</a></li>
          {#<li><a href="cmd">Command Line</a></li>#}
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          {% for db in databases %}
          <li class="nav-header" onclick="$('#toggle_{{ db }}').collapse('toggle')">
            {{ db }}
            <i class="icon-chevron-down pull-right"></i>
          </li>
          <li><a href="db/{{ db }}"><i class="icon-folder-open"></i> View Database</a></li>
            <ul class="unstyled collapse nav nav-list
            {%- if db == dbName %} in{% endif -%}
            " id="toggle_{{ db }}">
            {% for collection_db in collections -%}
              {% if loop.key == db -%}
                {% for collection in collection_db -%}
                  <li><a href="db/{{ db }}/{{ collection }}"><i class="icon-list-alt"></i> {{ collection }}</a></li>
                {%- endfor %}
              {%- endif %}
            {%- endfor %}
            </ul>
          <li class="divider"></li>
          {% endfor %}
        </ul>
      </div>

      {% block sidebar %}{% endblock %}
    </div>

    <div class="span9">
      <ul class="breadcrumb">
      {% block breadcrumb %}
        <li class="active">
          Home
        </li>
      {% endblock %}
      </ul>

      <div class="page-header">
      <h1 id="pageTitle">{{ title }}</h1>
      </div>

      {% if messageSuccess %}
      <div class="alert alert-success">
        <button class="close" data-dismiss="alert">×</button>
        <strong>{{ messageSuccess }}</strong>
      </div>
      {% endif %}

      {% if messageError %}
      <div class="alert alert-error">
        <button class="close" data-dismiss="alert">×</button>
        <strong>{{ messageError }}</strong>
      </div>
      {% endif %}

      {% block content %}{% endblock %}
    </div>
  </div>
</div>

</body>
<script>
$(document).ready(function(){
  $(".sidebar-nav").find("a").each(function(){
    if ($(this).text().length > 20) {
      $(this).tooltip({
        title: $(this).text(),
        delay: { show: 500, hide: 100 }
      });
    }
  });
});
</script>
</html>
